<include file="Public/header" />
<link href="__PUBLIC__/css/bootstrap.css" rel="stylesheet" />
<link href="__PUBLIC__/css/tree.css" rel="stylesheet" />
<title>我的桌面</title>
</head>
<body>
<div class="page-container" style="overflow: auto;">
    <div class="tree" style="float: left;">
        <ul id="tree">

        </ul>
    </div>
    <div style="float: left;min-height: 600px; padding-left: 80px;">
        <div class="form-group">
            <input type="text" name="name" class="form-control"  placeholder="类目名称">
        </div>
        <div class="form-group">
            <input name="sort" type="text" class="form-control" placeholder="排序">
        </div>
        <div class="form-group">
            <button onclick="add()" type="button" class="btn btn-success">添加</button>
        </div>
        <div class="form-group">
            <button onclick="edit()" type="button" class="btn btn-primary">修改</button>
        </div>
        <div class="form-group">
            <button id="reset" type="button" class="btn btn-info">重置</button>
        </div>
        <div class="form-group">
            <button onclick="del()" type="button" class="btn btn-danger">删除</button>
        </div>
        <div style="margin-bottom: 12px;" class="Huialert Huialert-info"><i class="icon-remove"></i>点击左侧的某个“类目”名称，即可修改。点击之后再添加，则是在该类目下添加一个类目，删除则是删除选中的类目</div>
    </div>
</div>
<include file="Public/footer" />
<include file="Public/footer_js" />
<script src="__PUBLIC__/js/tree.js" type="text/javascript"></script>
<script>
    var select_id;
    var level='';
    function ss(_this){
        _this.on('click',function (event){
            $(".tree p").css('background-color','#fff');
            $(this).css('background-color','#ddd');
            var data=$(this).parent().attr('tabindex').split('-');
            $("input[name=name]").prop('value',$(this).text());
            $("input[name=sort]").prop('value',data[1]);
            select_id=data[0];
            level=data[2];
            event.stopPropagation();
        });
        $("#reset").click(function (event){
            $(".tree p").css('background-color','#fff');
            select_id='';
            level='';
            $("input[name=name]").prop('value','');
            $("input[name=sort]").prop('value','');
        });
    }
    function add(){
        if(!select_id){
            select_id='';
        }
        $.post('__MODULE__/Category/addD',{
            name:$("input[name=name]").val(),
            level:level,
            sort:$("input[name=sort]").val(),
            parent_id:select_id,
        },function (msg){
            layer.msg(msg.data);
            if(msg.flag==1){
                setTimeout(function (){
                    location.reload();
                },800);
            }
        },'json');
    }
    function edit(){
        $.post('__MODULE__/Category/editD',{
            name:$("input[name=name]").val(),
            id:select_id,
            sort:$("input[name=sort]").val(),
        },function (msg){
            layer.msg(msg.data);
            if(msg.flag==1){
                setTimeout(function (){
                    location.reload();
                },800);
            }
        },'json');
    }
    function del(){
        $.get('__MODULE__/Category/del',{
            id:select_id,
        },function (msg){
            layer.msg(msg.data);
            if(msg.flag==1){
                setTimeout(function (){
                    location.reload();
                },800);
            }
        },'json');
    }
    function getCategory(){
        $.get('__CONTROLLER__/getCategory',{},function (msg){
            if(msg.flag==0){
                layer.msg('请添加类目');
            }else{
                show_cate(msg.data,$("#tree"));
            }
        },'json');
    }
    function show_cate(data,p_element){
        for(var m in data){
           if(data[m]['name']){
               var new_element=$('<li tabindex="'+data[m]['id']+'-'+data[m]['sort']+'-'+data[m]['level']+'"><p><span class="glyphicon glyphicon-plus"></span><i class="glyphicon glyphicon-folder-close"></i> '+data[m]['name']+'</p></li>');
               p_element.append(new_element);
               dd(new_element.find('span'));
               ss(new_element.find('p'));
               if(data[m]['child']){
                   new_element.append($("<ul></ul>"));
                   show_cate(data[m]['child'],new_element.find('ul'));
               }
           }
        }
    }
    getCategory();
</script>
</body>
</html>